<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="MsgDialog-container" v-if="msg">
      <view class="bg-img"></view>
      <image src="../static/guanbi@3x.png" @click="close" class="close-btn"></image>
      <view class="title">解锁成功</view>
      <view class="content">使用了
        <text class="num">1</text>
        张体验券
      </view>
      <view class="btn" @click="close">
        <image src="http://down.qwdata.vip/app_icon/1688313007227" class="icon"></image>
        <view class="flex v vc f1">
          <view class="btn-title">单次体验券</view>
          <view class="btn-desc">剩余<text class="num">9</text>张</view>
        </view>
        <view class="submit-btn">获取更多</view>
      </view>
      <view class="btn vip"  @click="toDetail">
        <image src="http://down.qwdata.vip/app_icon/1688313012652" class="icon"></image>
        <view class="flex v vc f1">
          <view class="btn-title">开通会员</view>
          <view class="btn-desc">享受全部功能权益</view>
        </view>
        <view class="submit-btn">立即开通</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>

export default {
  name: 'UnlockDialog',
  data() {
    return {
      msg: null
    }
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    open(msg) {
      this.msg = msg
      this.$refs.popup.open()
    },
    toDetail() {
      if (this.msg.href) {
        uni.navigateTo({
          url: this.msg.href
        });
      }
      this.close()
    },
    close() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style scoped lang='scss'>
.MsgDialog-container {
  position: relative;
  padding-top: 1px;
  width: 630rpx;
  height: 712rpx;
  background-image: linear-gradient(0, #ffffff, #e5f6fd);
  border-radius: 50rpx;

  .title {
    margin-top: 80rpx;
    text-align: center;
    color: #0B0B0B;
    font-size: 30px;
  }

  .content {
    text-align: center;
    margin-top: 20rpx;
    font-size: 16px;
    margin-bottom: 60rpx;
    .num {
      margin-left: 5rpx;
      margin-right: 5rpx;
      color: #FF4C49;
    }
  }

  .btn {
    height: 138rpx;
    background-color: #DCEFFF;
    margin: 30rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    &.vip {
      background-color: #FEF1E9;
      .btn-title {
        color: #FF5600;
      }
      .btn-desc {
        color: #ee8f60;
      }
      .submit-btn {
        background-color: #FF5600;
      }
    }

    .icon {
      width: 76rpx;
      height: 76rpx;
      margin-left: 24rpx;
      margin-right: 18rpx;
    }

    .btn-title {
      font-size: 15px;
      color: #1B242B;
      font-weight: bold;
    }

    .btn-desc {
      font-size: 11px;
      color: #5A7792;
      margin-top: 10rpx;
      .num {
        margin-left: 5rpx;
        margin-right: 5rpx;
        color: #FF4C49;
      }
    }
    .submit-btn {
      background-color: #3073F6;
      width: 160rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      margin-right: 30rpx;
    }
  }

  .close-btn {
    width: 24rpx;
    height: 24rpx;
    position: absolute;
    right: 40rpx;
    top: 40rpx
  }
}
</style>
